<template>
  <div id="swper">
    <transition name="fade">
      <div @touchend='end' @touchstart='start' @touchmove='move' class="swiper">
        <div class="swiperdiv" @click="chooseItem(item,index)" v-for="(item, index) in imgs" :style="config5[index]" :key="item.cover">
          <img :src="item.cover" style="width: 100%; height: 100%;">
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import { ref } from "vue"

export default {
  name: "swper",
  setup() {
    const loading = ref(true)
    const currentIndex = ref(3) //当前中间imgs数组中index
    const centerInfo = ref("") // 当前中间信息
    const startX = ref("")
    const endX = ref("")
    const imgs = ref([
      {
        id: 0,
        index: 0,
        cover: "https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/0/1676512700091%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230215185136.jpg"
      },
      {
        id: 1,
        index: 1,
        cover: "https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/1/1676512763432%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_202302151851361.jpg"
      },
      {
        id: 2,
        index: 2,
        cover: "https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/2/1676512785536%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_202302151851362.jpg" 
      },
      // {
      //   id: 3,
      //   index: 3,
      //   cover: "https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/3/1676512812667%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_202302151851363.jpg" 
      // },
      // {
      //   id: 4,
      //   index: 4,
      //   cover: "https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/0/1676512837591%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_202302151851364.jpg" 
      // },
     
    ])
    const previous = ref(0)
    const config5 = ref([
    //   {
    //     id: '-A',
    //     position: 'absolute',
    //     width: '22%',
    //     height: '72%',
    //     top: '19.2%',
    //     left: '-22%',
    //     opacity: 0,
    //     zIndex: 0,
    //     transition: '.4s'
    //   },
    //   {
    //     id: 'A',
    //     position: 'absolute',
    //     width: '22%',
    //     height: '72%',
    //     top: '19.2%',
    //     left: '0%',
    //     opacity: 1,
    //     zIndex: 1,
    //     transition: '.4s'
    //   },
      {
        id: 'B',
        position: 'absolute',
        width: '58%',
        height: '82%',
        top: '10%',
        left: '0%',
        opacity: 1,
        zIndex: 2,
        transition: '.4s'
      },
      {
        id: 'center',
        position: 'absolute',
        width: '64%',
        height: '100%',
        top: '0px',
        left: '50%',
        marginLeft: '-32.5%',
        opacity: 1,
        zIndex: 4,
        transition: '.4s'
      },
      {
        id: 'D',
        position: 'absolute',
        width: '58%',
        height: '82%',
        top: '10%',
        left: '61.8%',
        opacity: 1,
        zIndex: 2,
        transition: '.4s'
      },
    //   {
    //     id: 'E',
    //     position: 'absolute',
    //     width: '22%',
    //     height: '72%',
    //     top: '19.2%',
    //     left: '78%',
    //     opacity: 1,
    //     zIndex: 1,
    //     transition: '.4s'
    //   },
    //   {
    //     id: 'E+',
    //     position: 'absolute',
    //     width: '22%',
    //     height: '72%',
    //     top: '19.2%',
    //     left: '100%',
    //     opacity: 0,
    //     zIndex: 0,
    //     transition: '.4s'
    //   }
    ])
    return {
      loading, currentIndex, centerInfo, startX, endX, imgs, previous, config5
    }
  },
  methods: {
    // 获取数据
    async getData() {
      this.$nextTick(() => {
        this.loading = false;
      });
    },
    // 滑动上一个
    prev(index) {
      this.config5.push(this.config5.shift());
      this.currentIndex = this.currentIndex - 1;
       console.log(this.currentIndex,"fjlasdjlkasjdflkjljjflkajslfdkajsdf")
      if (this.currentIndex < 0) {
        this.currentIndex = this.imgs.length - 1;
      }
      this.centerIndex('prev');
    },
    // 滑动下一个
    next() {
      this.config5.unshift(this.config5.pop());
      this.currentIndex = this.currentIndex + 1;
      if (this.currentIndex > this.imgs.length - 1) {
        this.currentIndex = 0;
      }

      this.centerIndex('next');
    },
    // 开始移动端滑动屏幕
    start(event) {
      this.startX = event.changedTouches[0].clientX;
      this.startY = event.changedTouches[0].clientY;
    },
    // 连续滑动
    move(event) {
      this.endY = event.changedTouches[0].clientY;
      this.endX = event.changedTouches[0].clientX;
      this.stopDefault(event);
      // 如果是滑动，注解（223行到231行）这段。如果是连续滑动，放开（223行到231行）注解
      this.interval = this.endX - this.startX;
      // if (this.interval > 40) {
      //   this.startX = this.endX;
      //   this.prev();
      // }
      // if (this.interval < -40) {
      //   this.startX = this.endX;
      //   this.next();
      // }
    },
    // 滑动
    end(event) {
      // 如果是滑动，放开（236行到238行）的注解。如果是连续滑动，注解（236行到238行）
      this.endY = event.changedTouches[0].clientY;
      this.endX = event.changedTouches[0].clientX;
      this.formatSwiper();
    },
    formatSwiper() {
      if (this.startX > this.endX) {
        console.log('左边滑动');
        this.next();
        // if (this.startX > this.endX + 20) {
        //   this.next();
        // }
      } else {
        this.prev();
        console.log('右边滑动');
        // if (this.endX > this.startX + 20) {
        //   this.prev();
        // }
      }
    },
    // 阻止touchmove的横向默认事件（ios快捷操作会关闭页面）
    stopDefault(event) {
      let differenceY = this.endY - this.startY;
      let differenceX = this.endX - this.startX;
      if (Math.abs(differenceX) > Math.abs(differenceY)) {
        event.preventDefault();
      }
    },
    // 当前imgs在位置上的index（并非img数组的index）
    centerIndex(val) {
      if (val == 'prev') {
        for (let val of this.imgs) {
          if (val.index == this.imgs.length - 1) {
            val.index = 0;
          } else {
            val.index = val.index + 1;
          }
        }
      } else {
        for (let val of this.imgs) {
          if (val.index == 0) {
            val.index = this.imgs.length - 1;
          } else {
            val.index = val.index - 1;
          }
        }
      }
    },
    // 点击
    chooseItem(item, index) {
      
      // let cycles = item.index;
      // if (item.index <= 2) {
      //   for (let i = 0; i < 3 - cycles; i++) {
      //     console.log(item.index);
      //     this.prev();
      //   }
      // } else if (item.index >= 2) {
      //   for (let i = -1; i < item.index - 3; i++) {
      //     this.next();
      //   }
      // }
      //  else if (item.index == 2) {
      //   console.log('投票');
      // }
    },


  
  },
  created() {
    this.getData();
  }
}
</script> 
<style scoped >
.swper {
}
.swiper {
  width: 100%;
  height: 20rem;
  position: relative;
  overflow: hidden;
}
.swiperdiv {
  opacity: 0;
}
</style>